<template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" width="100%" height="200" />
        </van-swipe-item>
    </van-swipe>
    <div class="brands">
        <van-cell-group>
            <van-cell title="汽车品牌" />
            <van-swipe class="my-swipe" :autoplay="7000" indicator-color="white">
                <van-swipe-item>
                    <van-grid :column-num="5" icon-size="40px" :border="false">
                        <van-grid-item v-for="value in proIconData" :key="value" :icon="value.cimg"
                            :text="value.cname" />
                    </van-grid>
                </van-swipe-item>
                <van-swipe-item>
                    <van-grid :column-num="5" icon-size="40px" :border="false">
                        <van-grid-item v-for="value in proIconData2" :key="value" :icon="value.cimg"
                            :text="value.cname" />
                    </van-grid>
                </van-swipe-item>
            </van-swipe>

        </van-cell-group>
    </div>
    <div class="msdb">
        <van-row>
            <van-col span="6">
                <div class="rmdb">
                    <h3>热门汽车</h3>
                    <span>全能咨询</span><van-icon name="logistics" size="20px" />
                    <br><van-icon name="bullhorn-o" size="15px" /> 热门播报
                </div>

            </van-col>
            <van-col span="18">
                <div style="background-color: white; width: 100%; height: 100px; border-radius: 15px;">
                    <van-grid :column-num="4" :border="false" icon-size="30px">
                        <van-grid-item v-for="value in msdata" :key="value" :icon="value.imgurl" :text="value.pname" />
                    </van-grid>
                </div>

            </van-col>

        </van-row>

    </div>
    <hr style="margin-top: 5px;">
    <van-grid :column-num="2" :border="false" icon-size="30px" style=" padding-bottom: 40px;">
        <van-grid-item v-for="item in productdata" :key="item.id" :to="({ name: 'movedeitel', query: {id:item.id} })">
            <div class="procs">
                <van-image width="100%" height="200" :src="item.imgurl" />
                <div class="title">{{ item.pname }}</div>
                <div class="subtitle">{{ item.subname }}</div>
                <div style="color: red;">￥<span style="font-size: 22px; font-weight: 800;">{{item.oldprice}}</span>
                    <van-icon name="minus" />
                    <span style="font-size: 22px; font-weight: 800;">{{ item.newprice }}</span>
                </div>
            </div>
            <div style="width: 100%; margin-top: 8px;">
                <van-row>
                    <van-col span="16" style="color: #b3b3af;">2万＋条评论</van-col>
                    <van-col span="8">
                        <div class="kxs">看相似<van-icon name="share" /></div>

                    </van-col>
                </van-row>
            </div>
        </van-grid-item>
    </van-grid>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { CategoryApi,ProductApi } from '../../api';
const images = ref([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]);
const proIconData = ref()
const proIconData2 = ref()
const msdata = ref([])
//商品数据
const productdata=ref()
onMounted(() => { 
    getCategoryList();
    getProductList()
})

const getCategoryList = () => { 
    CategoryApi.select.call().then(res => { 
        console.log(res);
        let filter = res.filter(item => item.parentId == 0)
        console.log(filter);
        proIconData.value = filter.slice(0, 5)
        proIconData2.value = filter.slice(5, 10)
        
    })
}

const getProductList = () => { 
    ProductApi.select.call().then(res => { 
        console.log(res);
        let imgs = res.map(item => item.imgurl)
        // console.log(imgs);
        images.value = imgs
        // 取出商品 并筛选4个商品数据赋值给msdata 展示热门汽车
        msdata.value = res.slice(0, 4)
        productdata.value = res
    })
}
 
</script>

<style scoped>
/* .brands{
    width: 98%;
    height: 200px;
    margin: 0 auto;
    background-color: rgb(197, 15, 15);
} */

 .msdb{
    width: 99%;
    height: 100px;
    margin: 0 auto;
    background: url('../../assets/msbg.png') no-repeat;
    background-size: 100% 100%;

 }
 .rmdb{
    color: white;
    text-align: center;
    /* line-height: 70px; */
    margin-top: 20px;
    span{
        font-size: 14px;
    }
 }
 .van-grid-item__content{
    border-radius: 15px;
 }
 .procs{
    width: 100%;
    .title{
        font-size: 20px;
        font-weight: 800;
        width: 180px;
            /* 容器宽度 */
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 隐藏溢出的内容 */
            text-overflow: ellipsis;
            /* 显示省略号 */
    }
    .subtitle{
        font-size: 14px;
        color: #818686;
        margin-top: 3px;
        margin-bottom: 5px;
    }
   
 }
 .kxs{
    width: 60px;
    height: 25px;
    background-color: #818686;
    border-radius: 18px;
    text-align: center;
    line-height: 25px;
    font-size: 13px;
    color: white;

 }
</style>